---
title: Ícones
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Uma lista de ícones usados ​​em todo o nosso aplicativo.

## Ícones Tabler

Usamos ícones Tabler para React em todo o aplicativo.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Você pode importar cada ícone como um componente. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Props   | Tipo                                     | Descrição                               | Padrão       |
| ------- | ---------------------------------------- | --------------------------------------- | ------------ |
| tamanho | número                                   | A altura e a largura do ícone em pixels | 24           |
| cor     | Nome opcional para estilização adicional | A cor dos ícones                        | currentColor |
| traço   | número                                   | A largura do traço do ícone em pixels   | 2            |

</Tab>

</Tabs>

## Ícones Personalizados

Além dos ícones Tabler, o aplicativo também usa alguns ícones personalizados.

### Ícone do Catálogo de Endereços

Exibe um ícone de catálogo de endereços.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Props   | Tipo   | Descrição                               | Padrão |
| ------- | ------ | --------------------------------------- | ------ |
| tamanho | número | A altura e a largura do ícone em pixels | 24     |
| traço   | número | A largura do traço do ícone em pixels   | 2      |

</Tab>

</Tabs>
